// pages/clock/clock.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    width: 0,
    height: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取系统信息
    wx.getSystemInfo({
      success: res => {
        this.setData({
          width: res.windowWidth,
          height: res.windowHeight
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  timer: null,
  onReady: function () {
    //创建ctx 实例
    var ctx = wx.createCanvasContext('myCanvas')
    //将角度转换为弧度，方便在后面使用，
    //计算公式：弧度 = 角度 * Math.PI / 180
    const D6 = 6 * Math.PI / 180
    const D30 = 30 * Math.PI / 180
    const D90 = 90 * Math.PI / 180

    //获取宽和高值
    var width = this.data.width;
    var height = this.data.height
    //计算表盘半径，留出 30px 外边距
    var radius = width / 2 - 30
    //每秒绘制一次
    draw()
    this.timer = setInterval(draw, 1000)
    // 绘制函数
    function draw() {
      //设置坐标轴和原点为窗口的中心点
      ctx.translate(width / 2, height / 2)
      //绘制表盘
      drawClock(ctx, radius)
      //绘制指针
      drawHand(ctx, radius)
      //执行绘制
      ctx.draw()
    }

    //绘制表盘函数
    function drawClock(ctx, radius) {
      // 绘制大圆
      // 大圆的半径为 radius  ,线条粗细 为 2px
      ctx.setLineWidth(2) // 设置线条的粗细
      ctx.beginPath() //开始新的路径
      ctx.arc(0, 0, radius, 0, 2 * Math.PI, true)
      ctx.stroke() //画线
      // 绘制中心圆
      // 中心圆的半径为 8 px ,线条粗细为 1px 
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.arc(0, 0, 8, 0, 2 * Math.PI, true)
      ctx.stroke()
      // 绘制大刻度盘，线条粗细 5 px
      ctx.setLineWidth(5)
      for (var i = 0; i < 12; ++i) {
        //以原点为中心顺时针旋转，（多次调用旋转角度会叠加）
        // 大刻度需要绘制12歌线条，表示12个小时，每次旋转30度
        ctx.rotate(D30) // 360 / 12  = 30
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 15, 0) // 大刻度长度 15px
        ctx.stroke()
      }


      // 绘制小刻度盘，线条粗细为 1 px 
      ctx.setLineWidth(1)
      for (var i = 0; i < 60; ++i) {
        //小刻度值需要绘制60个线条 ，表示 60 分钟和60 秒 ，每次旋转6度
        ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 10, 0) //小刻度盘长度 10 px
        ctx.stroke()
      }





      //绘制文本
      ctx.setFontSize(20) //字号
      ctx.textBaseLine = 'middle' //文本垂直居中
      // 计算文本距离表盘中心的半径 r
      var r = radius - 30
      for (var i = 1; i <= 12; ++i) {
        // 利用三角函数计算文本坐标
        var x = r * Math.cos(D30 * i - D90)
        var y = r * Math.sin(D30 * i - D90)
        if (i > 10) {
          // 如果大于 10 调整 11 和 12 的位置
          // 在画布上绘制文本 fillText(文本，左上角 x 坐标，左上角 Y 坐标)
          ctx.fillText(i, x - 12, y)
        } else {
          ctx.fillText(i, x - 6, y)
        }
      }


    }

    function drawHand(ctx, radius) {
      var t = new Date() //获取当前时间
      var h = t.getHours() //小时
      var m = t.getMinutes() //分
      var s = t.getSeconds() //秒
      h = h > 12 ? h - 12 : h //将24 小时转化为 12 小时制
      // 时间从3 点开始，逆时针旋转 90 度，转向12点
      ctx.rotate(-D90)
      //绘制时针
      ctx.save() //记录旋转状态
      // 计算市时针指向的刻度
      // 通过 30 度 * h 可以计算每个整点的旋转角度
      // 如果时间不是整点，需要使用 h + m / 60 + s /3600 计算准确的偏移度
      ctx.rotate(D30 * (h + m  / 60 + s / 3600)) 
      ctx.setLineWidth(6)
      ctx.beginPath()
      ctx.moveTo(-20,0) //指针线条的起点（针尾留出 20 px）
      ctx.lineTo(radius / 2.6 , 0) //根据表盘半径计算线条的长度
      ctx.stroke()
      ctx.restore()   //恢复旋转状态，重新指向 12 点
      //绘制分针
      ctx.save()
      ctx.rotate(D6 *(m + s / 60))
      ctx.setLineWidth(4)
      ctx.beginPath()
      ctx.moveTo(-20,0)
      ctx.lineTo(radius / 1.8 , 0)
      ctx.stroke()
      ctx.restore()
      // 绘制 秒针
      ctx.save()
      ctx.rotate(D6 * s)
      ctx.setLineWidth(2)
      ctx.beginPath()
      ctx.moveTo(-20 , 0)
      ctx.lineTo(radius / 1.6 , 0)
      ctx.stroke()
      ctx.restore()
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})